<template>
	<n-page>
		<view slot="header">
			<view class="flex-row justify-between padding-sm bg-gray-4">
				<view>
					<n-icon name="friendfill" color="$gray-7" size="34"></n-icon>
					<text class="margin-left-sm">{{member_name}}</text>
				</view>
				<view>
					<text class="padding-right-sm">共计:{{teamListCount}} 人</text>
					<n-icon name="return" color="$blue-7" size="34" @click="back(source_member)"></n-icon>
				</view>
			</view>
		</view>
		<view slot="body" style="height: 100%;">
			<z-paging ref="paging" @query="getTeamList" :list.sync="teamList">
				<view slot="loading">
					<ns-loading></ns-loading>
				</view>
				
				<view class="padding-x-md border-bottom-xs border-dotted border-gray-5" style="border-top-width:0;border-left-width:0;border-right-width:0" v-for="(item, index) in teamList" :key="index" @click="jump(item.member_id,item.show_name)">
					<view class="flex-row items-center padding-y-xs">
						<view class="margin-right-md radius-xl">
							<n-image width="120" height="120" :src="$util.img(item.headimg)" placeholder="/static/default_headimg.png" mode="aspectFit"></n-image>
						</view>
						<view class="flex-column flex-1">
							<view class="flex-row justify-between">
								<view class="text-md text-bold">{{ item.show_name }}</view>
								<view class="text-md color-red-6" >
									<text>{{ item.invite_code }}</text>
								</view>
							</view>
							<view class="text-xs color-gray-7">
								<text>级别:</text>
								<n-icon v-if="item.card_level" v-for="count in item.card_level" name="favorfill" color="$yellow-6" size="24"></n-icon>
								<text v-if="item.card_level == 0">体验</text>
								
							</view>
							<view class="text-xs color-gray-7">
								<text>业绩:{{item.invite_card_money}}</text>
								<text class="margin-left-xs">市场:{{item.invite_num}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</z-paging>
		</view>
	</n-page>
</template>

<script>
	export default {
		data() {
			return {
				teamList: [],
				team_search: '',
				teamListCount: 0,
				source_member: 0,
				member: [],
				member_name_arr: [],
				member_name: '',
			}
		},
		onLoad(option) {

		},
		created() {
			
		},
		methods: {
			// 初始化用户信息
			getInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							this.memberInfo = res.data;
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getTeamList(pageNo, pageSize) {
				this.$api.sendRequest({
					url: '/api/member/inviteList',
					data: {
						page: pageNo,
						page_size: pageSize,
						source_member: this.source_member,
					},
					success: res => {
						let newArr = []
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.teamListCount = res.data.count;
						} else {
							this.$util.showToast({ title: msg });
						}
						this.$refs.paging.complete(newArr);
					},
					fail: res => {
						this.$refs.paging.complete(false);
					}
				});
			},

			jump(e, i) {
				let arr = {
					'member_id': e,
					'member_name': i
				};
				let member_name_arr = {
					'member_name': i
				};
				this.member.push(arr);
				this.teamList = [];
				this.source_member = this.member[this.member.length - 1].member_id;
				this.member_name_arr = [];
				for (var i = 0; i < this.member.length; i++) {
					this.member_name_arr.push(this.member[i].member_name);
				}
				this.member_name = this.member_name_arr.join(" > ");
				this.$refs.paging.reload()
			},
			back(e) {
				this.member.pop(this.member.length - 1);
				this.teamList = [];
				if (this.member.length == 0) {
					this.source_member = 0;
				} else {
					this.source_member = this.member[this.member.length - 1].member_id;
				}
				this.member_name_arr = [];
				for (var i = 0; i < this.member.length; i++) {
					this.member_name_arr.push(this.member[i].member_name);
				}
				this.member_name = this.member_name_arr.join(" > ");
				this.$refs.paging.reload()
			}
		}
	}
</script>

<style lang="scss">
	
</style>
